<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${ctx.contextPath}/docroot/js-template-support/js/hogan-2.0.0.min.js"></script>
<script id="exchange-rate-template" type="text/plain">

<div>
	<div>
		<h4 style="background-color: {{color}}">{{direction}}</h4>
        <h3 id="bid">$ {{bid}}</h3>
    </div>
	<div>
        <span>asking: </span>
        <span id="ask">{{ask}}</span>
	</div>
</div>

</script>
<script type="text/javascript">


	var exchangeRateTemplate = Hogan.compile($("#exchange-rate-template").text());

	$(function() {
	    var selectSymbol = $("#selectSymbol");
	    var oldBid = null;
	    
	    //reset the display when the symbol is changed
	    selectSymbol.change(function() {
	        oldBid = null;
	    });
	
	    var sessionToken = null;

		
	    
	    //called every second to refresh the display
	    var getCurrentRates = function() {
	    	$.get("http://api-sandbox.oanda.com/v1/quote", "instruments=${content.symbol!"US30_USD"}", function(data, textStatus, jqXHR){ 
	    	
	    		var priceInfo = data.prices[0];

	            if(oldBid && priceInfo.bid < oldBid) {
	                priceInfo.color = "#dd0000";
	                priceInfo.direction = "-";
	            } else if(oldBid && priceInfo.bid > oldBid) {
	                priceInfo.color = "#00dd00";
	                priceInfo.direction = "+";
	            } else {
	                priceInfo.color = "#ffffff";
	            }
	            oldBid = priceInfo.bid;
				
	            //update the displayed rates
				$("#quote-panel").html(exchangeRateTemplate.render(priceInfo));
				setTimeout(getCurrentRates, 1000);
	    	}, "json");
	    }
	
		//get the symbol list
		/*
		$.get("http://api-sandbox.oanda.com/v1/instruments", function(data, textStatus, jqXHR){ 
			//add the symbols to our drop down
	        for(var cur in data.instruments) {
	            var symbolName = data.instruments[cur].instrument;
	
	            selectSymbol.append("<option value='" + symbolName + "'>" + symbolName + "</option>");
	        }
	
	        //select EUR/USD by default
	        selectSymbol.find("[value=EUR_USD]").attr("selected", "selected");
	        getCurrentRates();
		}, "json");
		*/
		
		getCurrentRates();
	
	});
	
</script>
<div id="quote-panel"></div>